var play=document.getElementsByClassName("play")[0];//获取游戏界面，为了事件代理
var step_number=document.getElementById("score");//获取步数
var hidden_card_number=0;	//已经消灭的卡牌的数量
var flag=true;//开关，防止瞬间点击太多次
var run_one=0,run_two=0;//run_one和run_two分别代表两次翻转的卡牌

//获取首页传过来的参数
function getAttr(){
	var reg=/\d/g;
	lv=(window.location.search).match(reg)[0];
	btn_num=(window.location.search).match(reg)[1];
	for(var i=1;i<=btn_num;i++){
		if(lv==i){
			init(lv,4);
		}
	}
}
getAttr();

var grade;
//鉴别等级
function lvSwitch(lv){
	switch(lv){
	    case '1':
	        grade="青铜";
	        break;
	    case '2':
	        grade="白银";
	        break;
	    case '3':
	        grade="黄金";
	        break;
	    case '4':
	        grade="白金";
	        break;
	    case '5':
	        grade="钻石";
	        break;
	    default:
	        grade="王者";
	        break;
	}
}
lvSwitch(lv);

var square=document.getElementsByClassName("square");

//交给play事件代理
play.addEventListener("click",function(e){
	if(flag){
		flag=false;
		//如果点击的是我们看到的背面,则卡牌翻转
		if(e.target.className.indexOf("front")!=-1){
			step_number.innerHTML=parseInt(step_number.innerHTML)+1;//每点击一次步数+1
			e.target.style.animation="frontplay 0.25s linear both";
			e.target.nextElementSibling.style.animation="backplay 0.25s linear both";
			//如果run_one等于0，代表牌面上没有一张被翻过
			if(run_one==0){
				//把第一张翻转的卡牌给run_one
				run_one=e.target;
			}
			//否则表示牌面上已经有牌被翻了，并且第二次点击的不是同一张
			else if(run_one!=0 && e.target.nextElementSibling!=null){
				run_two=e.target;//把第二次翻转的卡牌给run_two
				//如果两张卡牌的照片的src相同，则消掉
				if(run_one.nextElementSibling.children[0].src==run_two.nextElementSibling.children[0].src){
					setTimeout(function(){
						run_one.parentElement.style.transform="scale(0)";
						run_two.parentElement.style.transform="scale(0)";
						run_one=0;
						run_two=0;
						hidden_card_number+=2;//消掉的块数+2
						//如果消掉的块数等于所有方块的个数，则说明已经消掉全部了
						if(hidden_card_number==square.length){
							hidden_card_number=0
							setTimeout(function(){
								alert("恭喜你召唤师，你走了"+step_number.innerHTML+"步终于成为了"+grade);
								var con=window.confirm("骚年,是否再撸一把?");
								if(con){
									play.innerHTML=""
									step_number.innerHTML=0;
									init(lv,4);
								}else{
									window.location.href="../../index.html"
								}
							},500)
						}
					},250)
				}
				//否则两张都翻回去
				else{
					run_one.style.animation="backplay 0.25s linear both";
					run_one.nextElementSibling.style.animation="frontplay 0.25s linear both"
					run_two.style.animation="backplay 0.25s linear both";
					run_two.nextElementSibling.style.animation="frontplay 0.25s linear both";
					//在250ms后，把两个元素的动画给清掉
					setTimeout(function(){
						run_one.style.animation="none";
						run_one.nextElementSibling.style.animation="none"
						e.target.style.animation="none";
						e.target.nextElementSibling.style.animation="none";
						run_one=0;
						run_two=0;
					},250)
				}
			}
			
			flag=true;
		}else{
			flag=true;
		}
	}
})

//游戏界面初始化函数，参数为（行数，列数）
function init(row_num,col_num){
	var arr=new Array();

	//创建行
	for(var i=0;i<row_num;i++){
		play.innerHTML+=`<div class="row"></div>`
	}
	//创建列
	var row=$(".play .row");
	var game_show=document.getElementById("game_show");
	var game_show_height=200+(row.length)*80;
	
	game_show.style.height=game_show_height+"px"
	for(i=0;i<row_num;i++){
		for(var j=0;j<col_num;j++){
			row[i].innerHTML+="<div class='col-xs-3 square'>"+
					"<div class='front card' name=''></div>"+
					"<div class='back card' name=''><img class='card_img' src='' /></div>"+
				"</div>"
		}
	}
	
	//创建规律的数组
	var square=document.getElementsByClassName("square");
	for(i=0;i<square.length;i++){
		arr[i]=i+1;
		if(arr[i]>(square.length/2)){
			arr[i]=arr[i]-square.length/2
		}
		if(arr[i]>10 && arr[i]<=20){
			arr[i]=arr[i]-10;
		}
		if(arr[i]>20){
			arr[i]=arr[i]-20;
		}
	}
	
	//打乱数组
	arr.sort(randomSort);
	
	//渲染img的src
	var card_img=document.getElementsByClassName("card_img");
	for(i=0;i<arr.length;i++){
		card_img[i].src="../img/hero"+arr[i]+".png"
	}
	arr.length=0;
}

//打乱数组函数
function randomSort(a, b) {
    return Math.random()>.5 ? -1 : 1;
    //随机数大于0.5返回-1，反之返回1
}

var game_restart_btn=document.getElementsByClassName("game_restart")[0];
var game_end_btn=document.getElementsByClassName("game_end")[0];


//重开
game_restart_btn.onclick=function(){
	play.innerHTML=""
	step_number.innerHTML=0;
	init(lv,4);
}

//重开
game_end_btn.onclick=function(){
	window.location.href="../../index.html"
}
